<template>
  <div class="home-container">
    <!-- 头部 -->
    <van-nav-bar fixed placeholder>
      <template #title>
        <van-button
          round
          icon="search"
          type="primary"
          @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- 文章列表Tab标签切换 -->
    <van-tabs v-model="active" sticky offset-top="1.23rem">
      <van-tab v-for="item in userChannel" :key="item.id" :title="item.name">
        <!-- 
          将文章展示部分单独抽离出去， 目的是避免当前组件的代码量过大
          后期难以维护
         -->
        <articleList :channel="item"></articleList>
      </van-tab>
      <!-- 添加汉堡按钮 -->
      <template #nav-right>
        <div class="van-tab"></div>
        <div class="gengduo" @click="isShow = true">
          <i class="toutiao toutiao-gengduo"></i>
        </div>
      </template>
    </van-tabs>
    <!-- 频道编辑弹出层 -->
    <van-popup
      v-model="isShow"
      position="bottom"
      closeable
      close-icon-position="top-left"
      :style="{ height: '100%' }"
    >
      <!-- 频道编辑组件单独抽离 -->
      <channelEdit
        v-if="isShow"
        :active-index="active"
        :user-channel="userChannel"
        @update-active="updateActive"
      ></channelEdit>
    </van-popup>
  </div>
</template>

<script>
import { userChannelApi } from '@/api/Home'
import articleList from './components/article-list.vue'
import channelEdit from './components/channel-edit.vue'
import { getItem } from '@/utils/storage'
export default {
  components: {
    articleList,
    channelEdit
  },
  data() {
    return {
      active: 0, // 同步tab标签页的激活索引值
      isShow: false, // 控制编辑频道的弹框显示与隐藏
      userChannel: [] // 存储用户频道数据
    }
  },
  created() {
    this.getUserChannel()
  },
  methods: {
    // 接收子组件的更新激活状态的通知，更新tab切换active的值
    updateActive(index, isShow = false) {
      this.active = index
      this.isShow = isShow
    },
    // 获取用户频道数据，用于tab切换
    async getUserChannel() {
      const { user } = this.$store.state
      const channels = getItem('USERCHANNEL')
      // if (user) {
      //   // 如果用已经登录，从接口获取频道数据
      //   const { data } = await userChannelApi()
      //   console.log(data)
      //   this.userChannel = data.data.channels
      // } else {
      //   // 如果用户没有登录
      //   if (channels) {
      //     // 如果缓存中取到了数据，直接使用缓存数据
      //     this.userChannel = channels
      //   } else {
      //     // 如果缓存也没有数据，还是调用接口获取数据
      //     const { data } = await userChannelApi()
      //     console.log(data)
      //     this.userChannel = data.data.channels
      //   }
      // }
      if (user || !channels) {
        // 如果用已经登录，从接口获取频道数据
        const { data } = await userChannelApi()
        console.log(data)
        this.userChannel = data.data.channels
      } else {
        // 如果缓存中取到了数据，直接使用缓存数据
        this.userChannel = channels
      }
    }
  }
}
</script>

<style lang="less">
.home-container {
  .van-nav-bar {
    background-color: #3296fa;
    .van-button {
      width: 552px;
      height: 64px;
      background: #6fa9f5;
      border: none;
      .van-icon {
        color: #fff;
      }
    }
    .van-nav-bar__title {
      max-width: 100%;
    }
  }
  .gengduo {
    position: fixed;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background: #fff;
  }
}
</style>